<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:pou="http://primefaces.org/ui">
    <h:head>
        <title>TODO supply a title</title>
    </h:head>
    <body>
        <h:form>
            <ui:composition>
                <script type="text/javascript" src="#{request.contextPath}/js/html2canvas.js.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/libs/FileSaver.js/FileSaver.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/libs/BlobBuilder.js/BlobBuilder.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.addimage.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.from_html.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.ie_below_9_shim.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.sillysvgrenderer.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.split_text_to_size.js"></script>
                <script type="text/javascript" src="#{request.contextPath}/js/jsPDF/jspdf.plugin.standard_fonts_metrics.js"></script>
                <script type="text/javascript">
                    var limit = 1;
                    var counter = 0;
                    var canvasList = new Array();
                    var dimension = [75, 180];

                    function watcher() {
                        if (counter === limit) {
                            var doc = new jsPDF();
                            doc.text(20, 20, 'Uno Petrol - #{mbSummary.mesInicio+1}/#{mbSummary.anioInicio}');
                            doc.addImage(canvasList[0].toDataURL('image/jpeg'), 'JPEG', 15, 30, dimension[0], dimension[1]);
                            doc.output('dataurl');
                        } else {
                            setTimeout(watcher, 1000);
                        }
                    }
                    function topdf() {
                        limit = 1;
                        html2canvas(document.getElementById('micreditform:panelDetalleData:gridtabgeneral'), {
                            onrendered: function(canvas) {
                                canvasList.push(canvas);
                                counter++;
                            }
                        });
                        setTimeout(watcher, 500);
                        return false;
                    }
                    function topdfEl(id, wid, len) {
                        limit = 1;
                        html2canvas(document.getElementById(id), {
                            onrendered: function(canvas) {
                                canvasList.push(canvas);
                                counter++;
                            }
                        });
                        dimension = [wid, len];
                        setTimeout(watcher, 500);
                        return false;
                    }
                </script>
                <style type="text/css">
                    .colRubro{
                        width: 200px;
                        font-weight: bold;
                    }
                    .colMontos{
                        width: 90px;  
                        text-align: right;
                    }
                    .singleLine
                    {
                        white-space:normal;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        width: 110px;
                    }
                </style>
                <pou:panel rendered="#{mbSummary.showDetailLinea}" id="detailReport" header="Detalle Linea Negocio: #{mbSummary.unidadNegocioSeleccionada.nombre} / #{mbSummary.lineaNegocioSeleccionada.nombre}" >
                    <h:panelGrid width="100%" >
                        <pou:toolbar rendered="#{mbSummary.showLineasOptions}">
                            <pou:toolbarGroup  align="left">
                                <ui:repeat var="ln" value="#{mbSummary.lineasDeNegocios}" >
                                    <pou:commandButton icon="ui-icon-zoomin" value="#{ln.nombre}" actionListener="#{mbSummary.cargarDetalleLineaNegocio(ln)}"
                                                       onclick="bui.show()" ajax="false"  process="@this"  />
                                </ui:repeat>
                            </pou:toolbarGroup>
                            <pou:toolbarGroup align="right">
                                <pou:commandButton icon="ui-icon-arrowthick-1-s"  ajax="false" value="EXCEL">
                                    <pou:fileDownload value="#{mbSummary.content3}" />
                                </pou:commandButton>
                                <pou:commandButton actionListener="#{mbSummary.doExportToPDF()}" 
                                                   onstart="bui.show()" update="dlgPDF"
                                                   oncomplete="showDlgPDF();" icon="ui-icon-print" value="PDF"></pou:commandButton>
                                <pou:commandButton icon="ui-icon-arrowreturnthick-1-w" onclick="bui.show()" update="@form" value="Regresar" ajax="false" immediate="true" actionListener="#{mbSummary.doActionBackDetalleUnidadNegocio}" />
                            </pou:toolbarGroup>
                        </pou:toolbar>
                        <pou:tabView cache="false" rendered="#{mbSummary.showDetailLinea}" id="panelDetalleData" >
                            <pou:tab title="General">
                                <h:panelGrid id="gridtabgeneral">
                                    <pou:selectOneButton value="#{mbSummary.opcionTabGeneral}">
                                        <f:selectItem itemLabel="Detalle Linea Negocio" itemValue="0" />
                                        <f:selectItem itemLabel="Graficas" itemValue="1" />
                                        <pou:ajax listener="#{mbSummary.prepareGraphics()}" event="change" update="@form" onstart="bui.show()" onsuccess="bui.hide()" />
                                    </pou:selectOneButton>
                                    <h:panelGroup style="width: 1800px;" rendered="#{mbSummary.opcionTabGeneral.intValue()==1}" layout="block">
                                        <iframe src="${facesContext.externalContext.requestContextPath}/cred/micreditsgraph.xhtml" 
                                                width="100%" height="800px;"
                                                scrolling="false" frameborder="0"
                                                ></iframe>
                                    </h:panelGroup>
                                    <script type="text/javascript">
                                        var showdialog = function() {
                                            if (#{mbSummary.showPopUpDialog}) {
                                                bui.hide();
                                                dlgreport.show();
                                            }
                                        }
                                    </script>
                                    <h:panelGroup rendered="#{mbSummary.opcionTabGeneral.intValue()==0}" layout="block">
                                        <pou:dataTable  rowKey="#{filaDet.hashCode()}" 
                                                        selection="#{mbSummary.detailColumnSelected}"
                                                        selectionMode="single"
                                                        id="datosDetalle1" var="filaDet" value="#{mbSummary.filasDetG1}">
                                            <pou:ajax event="rowSelect" listener="#{mbSummary.detailSelectAction()}"   
                                                      update="@form" oncomplete="showdialog();"  onstart="bui.show()"/>  
                                            <f:facet name="header">  
                                                Detalle Linea Negocio: #{mbSummary.mesInicio+1}/#{mbSummary.anioInicio} - #{mbSummary.lineaNegocioSeleccionada.nombre} - #{mbSummary.unidadNegocioSeleccionada.nombre}
                                            </f:facet>  
                                            <pou:columns var="colDet" columnIndexVar="index" value="#{mbSummary.columnasDet}">
                                                <f:facet name="header" class="">
                                                    #{colDet.header}
                                                </f:facet>
                                                #{filaDet[index].valor}
                                                <h:panelGroup class="flag1" layout="block" rendered="#{index==0}" >
                                                </h:panelGroup>
                                                <h:panelGroup class="flag2" layout="block" rendered="#{index>0}"  >
                                                </h:panelGroup>
                                            </pou:columns>
                                        </pou:dataTable>
                                        <pou:dataTable rowKey="#{filaDet.hashCode()}"
                                                       selection="#{mbSummary.detailColumnSelected}"
                                                       selectionMode="single" id="datosDetalle2" var="filaDet" value="#{mbSummary.filasDetG2}">
                                            <pou:ajax event="rowSelect" listener="#{mbSummary.detailSelectAction()}"   
                                                      update="@form"  onstart="bui.show()" oncomplete="showdialog();"/>  
                                            <pou:columns var="colDet" columnIndexVar="index" value="#{mbSummary.columnasDet}">
                                                <f:facet  class="colMontos" name="header">
                                                    #{colDet.header}
                                                </f:facet>
                                                <h:outputText  value="#{filaDet[index].valor}" />
                                                <h:panelGroup class="flag1" layout="block" rendered="#{index==0}" >
                                                </h:panelGroup>
                                                <h:panelGroup class="flag2" layout="block" rendered="#{index>0}"  >
                                                </h:panelGroup>
                                            </pou:columns>
                                        </pou:dataTable>

                                        <pou:dataTable rowKey="#{filaDet.hashCode()}" 
                                                       selection="#{mbSummary.detailColumnSelected}"
                                                       selectionMode="single" id="datosDetalle3" var="filaDet" value="#{mbSummary.filasDetG3}">
                                            <pou:ajax event="rowSelect" listener="#{mbSummary.detailSelectAction()}"   
                                                      update="@form" onstart="bui.show()" oncomplete="showdialog();"  />  
                                            <pou:columns var="colDet" columnIndexVar="index" value="#{mbSummary.columnasDet}">
                                                <f:facet  name="header">
                                                    #{colDet.header}
                                                </f:facet>
                                                <h:outputText  value="#{filaDet[index].valor}" />
                                                <h:panelGroup class="flag1" layout="block" rendered="#{index==0}" >
                                                </h:panelGroup>
                                                <h:panelGroup class="flag2" layout="block" rendered="#{index>0}"  >
                                                </h:panelGroup>
                                            </pou:columns>
                                        </pou:dataTable>

                                        <pou:dataTable rowKey="#{filaDet.hashCode()}" 
                                                       selection="#{mbSummary.detailColumnSelected}"
                                                       selectionMode="single" id="datosDetalle4" var="filaDet" value="#{mbSummary.filasDetG4}">
                                            <pou:ajax event="rowSelect" listener="#{mbSummary.detailSelectAction()}"   
                                                      update="@form"  onstart="bui.show()" oncomplete="showdialog();"
                                                      />  

                                            <pou:columns var="colDet" columnIndexVar="index" value="#{mbSummary.columnasDet}">
                                                <f:facet name="header">
                                                    #{colDet.header}
                                                </f:facet>
                                                #{filaDet[index].valor}
                                                <h:panelGroup class="flag1" layout="block" rendered="#{index==0}" >
                                                </h:panelGroup>
                                                <h:panelGroup class="flag2" layout="block" rendered="#{index>0}"  >
                                                </h:panelGroup>
                                            </pou:columns>
                                        </pou:dataTable>
                                    </h:panelGroup>
                                </h:panelGrid>
                            </pou:tab>                        
                            <pou:tab titletip="Reporte 80/20"  title="Reporte 80/20">
                                <ui:include src="micredits8020.xhtml" />
                            </pou:tab>
                            <pou:tab title="Cuentas Incobrables">
                                <ui:include src="micreditsProvisionCtas.xhtml" />
                            </pou:tab>
                            <pou:tab title="Detalle Por Agentes">
                                <h:panelGrid columns="2">
                                    <pou:button onclick="return topdfEl('micreditform:panelDetalleData:gridagentes', 200, 150);" 
                                                icon="ui-icon-print" value="PDF"></pou:button>
                                    <pou:commandButton ajax="false" icon="ui-icon-arrowthick-1-s" value="EXCEL">  
                                        <pou:fileDownload value="#{mbSummary.content4}" />
                                    </pou:commandButton>
                                </h:panelGrid>
                                <h:panelGrid id="gridagentes">
                                    <pou:dataTable id="datosRVDetalle1" var="filaDet" value="#{mbSummary.filasRepVentasG1}">
                                        <f:facet name="header">  
                                            <p style="font-size: 14px;">Informacion detallada para: <strong> #{mbSummary.lineaNegocioSeleccionada.nombre} </strong></p>
                                        </f:facet>  
                                        <pou:columns  var="colDet"  columnIndexVar="index" value="#{mbSummary.columnasRepVentas}">
                                            <f:facet name="header">
                                                <h:panelGroup class="singleLine" layout="block" >
                                                    #{colDet.header}
                                                </h:panelGroup>
                                            </f:facet>
                                            <h:panelGroup class="colRubro" layout="block" rendered="#{index==0}" >
                                                #{filaDet[index].valor}
                                            </h:panelGroup>
                                            <h:panelGroup class="colMontos" layout="block" rendered="#{index>0}"  >
                                                #{filaDet[index].valor}
                                            </h:panelGroup>
                                        </pou:columns>
                                    </pou:dataTable>
                                    <pou:dataTable  id="datosRVDetalle2"  var="filaDet" value="#{mbSummary.filasRepVentasG2}">
                                        <pou:columns    var="colDet" columnIndexVar="index" value="#{mbSummary.columnasRepVentas}">
                                            <f:facet  name="header">
                                                <h:panelGroup class="singleLine" layout="block" >
                                                    #{colDet.header}
                                                </h:panelGroup>
                                            </f:facet>
                                            <h:panelGroup class="colRubro" layout="block" rendered="#{index==0}" >
                                                #{filaDet[index].valor}
                                            </h:panelGroup>
                                            <h:panelGroup class="colMontos" layout="block" rendered="#{index>0}"  >
                                                #{filaDet[index].valor}
                                            </h:panelGroup>
                                        </pou:columns>
                                    </pou:dataTable>
                                </h:panelGrid>
                            </pou:tab> 
                        </pou:tabView>
                    </h:panelGrid>
                </pou:panel>
                <pou:blockUI block="detailReport" widgetVar="bui">
                    Espere un momento...<br />
                    <h:graphicImage width="16" height="16" library="images" name="ajaxloader2.gif" />
                </pou:blockUI>
                <pou:dialog width="600" height="500"  id="dlgreport" header="Reporte" widgetVar="dlgreport">
                    <ui:include src="#{mbSummary.popUpDialogPage}" />
                </pou:dialog>
                <script type="text/javascript">
                    $("td .flag1").css("width", "260px");
                    $("td .flag2").css("width", "95px");
                </script>
                <script type="text/javascript">
                    if (#{mbSummary.exportToPDF}) {
                        topdf();
                    }
                    
                    function showDlgPDF() {
                        setTimeout(function() {
                            bui.hide();
                            dlgPDF.show()
                        }, 1000);
                    }
                </script>
                <pou:dialog id="dlgPDF" height="400" width="500" modal="true" header="Exportacion a PDF" widgetVar="dlgPDF">
                    <h:panelGroup layout="block" rendered="#{mbSummary.exportToPDF}">
                        <iframe src="${facesContext.externalContext.requestContextPath}" 
                                width="100%" height="800px;"
                                scrolling="false" frameborder="0"
                                ></iframe>
                    </h:panelGroup>
                </pou:dialog>
            </ui:composition>

        </h:form>
    </body>
</html>
